import React from 'react'
import { TitleBar, Tabs, Link, NavContent } from '../../ui-components'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as hrAction from '../../actions/onboarding.hr.action'
import * as staffAction from '../../actions/onboarding.staff.action'
import * as fileAction from '../../actions/file.action'
import { fetchTeamData } from '../../actions/team.action'
import { fetchProfileTemplateFields } from '../../actions/system.action'
import { clearAtList, fetchAtList } from '../../actions/home.action'
import { updateAvatar, fetchAddresses } from '../../actions/app.action'
import { resetPassword } from '../../actions/auth.action'
import cx from 'classnames'
import style from './style.onboarding'

export default
@connect(null, dispatch => ({actions: bindActionCreators({...staffAction, ...hrAction, ...fileAction, fetchAddresses, updateAvatar, fetchTeamData, fetchProfileTemplateFields, fetchAtList, clearAtList, resetPassword }, dispatch)}))
class Onboarding extends React.Component {

  init = {
    tabsIndex: 1
  }

  tabMap = ['/reorg/onboarding/hr/onboardingFlows?hasApproved=0', '/reorg/onboarding/hr/onboardingFlows?hasApproved=1', '/reorg/onboarding/hr/templateManage', '/reorg/onboarding/hr/docManage']

	static contextTypes = {
		router: React.PropTypes.object
	}

  handleTab(index) {
    const { push } = this.context.router
    push(this.tabMap[index-1])

    this.setState({
      tabsIndex: index
    })
  }

  componentWillReceiveProps(props) {
    if (this.props.location.query.hasApproved != props.location.query.hasApproved && props.location.query.hasApproved != null) {
      this.setState({
        tabsIndex: +props.location.query.hasApproved + 1
      })
    } else if (this.props.location.pathname != props.location.pathname) {
      this.setState({
        tabsIndex: this.tabMap.indexOf(props.location.pathname)+1
      })
    }
  }

  constructor(props) {
    super(props)
    const { hasApproved } = props.location.query
    const tabsIndex = hasApproved == null?  this.tabMap.indexOf(props.location.pathname)+1: +hasApproved+1
    this.state = {
      ...this.init,
      tabsIndex
    }
  }

  render() {
    return (
      <div className={style.root}>
        <TitleBar label="入职管理"/>
        <Tabs
          top
          className={style.tabs}
          index={this.state.tabsIndex}
          onChange={::this.handleTab}
          tabs={[
            { label: '处理中'/*, disabled: true */},
            { label: '已处理' },
            { label: '模板管理' },
            { label: '文档管理' }
          ]}
        />
        { 
          React.Children.map(this.props.children, child => React.cloneElement(child, {
            ...this.props.actions,
            ...this.props,
            ...this.context
          })) 
        }
      </div>
    )
  }
}
